<template>
  <div class="app-container">
    <el-row :gutter="20" class="header">

      <el-col :span="16">
      <span v-if="select_tea">
        
          <span style="font-size: 1.2em;" ml-4>您目前选择的导师是： </span>
        <el-tag size="large" type="default" style="font-size: 1.2em;" ml-4>{{ select_tea.teacher_name }}老师 </el-tag>
        <el-popconfirm title="您确定要退选导师吗？" @confirm="delSelectTea(select_tea.teacher_id)" mb-4>
          <template #reference>
            <el-button type="danger" size="small" :icon="Remove">退选导师</el-button>
          </template>
        </el-popconfirm>

      </span>
      <span v-else>
        您目前暂未选择导师
      </span>
        </el-col>
    <el-col :span="8">
      <a href="https://cs.xjau.edu.cn/szdw/main.htm" target="_blank" style="font-size: 20px;text-align: center;">导师风采请点击这里</a>
    </el-col>

       



    </el-row>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入姓名..." v-model="queryForm.query" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="queryForm.status" @change="initTeaList"  placeholder="全部">
          <el-option label="全部" value="" selected />
          <el-option label="名额已满" value="1" />
          <el-option label="名额未满" value="2" />
        </el-select>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initTeaList">搜索</el-button>
    </el-row>
    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
      <el-table-column type="selection" width="55" />
      <!-- <el-table-column prop="avatar" label="头像" width="80" align="center">
        <template v-slot="scope">
          <img :src="getServerUrl() + 'media/userAvatar/' + scope.row.avatar" width="50" height="50" />
        </template>
      </el-table-column> -->
      <el-table-column prop="teacher_name" label="姓名" width="100" align="center" />
      <el-table-column prop="teacher_field" label="研究领域" width="180" align="center" />
      <el-table-column prop="teacher_direction" label="研究方向" width="200" align="center" />
      <!-- <el-table-column prop="teacher_phone" label="联系方式" width="180" align="center" /> -->
      <el-table-column prop="teacher_dorm" label="类型(博/硕导)" width="100" align="center" />
      <el-table-column prop="teacher_quota_M" label="专硕名额" width="100" align="center" />
      <el-table-column prop="teacher_quota_P" label="学硕名额" width="100" align="center" />
      <el-table-column prop="teacher_gender" label="性别" width="100" align="center" />
      <!-- <el-table-column prop="roles" label="拥有角色" width="200" align="center">
        <template v-slot="scope">
          <el-tag size="small" type="warning" v-for="item in
  scope.row.roleList"> {{ item.name }}</el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="status" label="状态？" width="200" align="center">
        <template v-slot="{ row }">
          <el-switch v-model="row.status" @change="statusChangeHandle(row)" active-text="正常" inactive-text="禁用"
            :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column> -->
      <el-table-column prop="teacher_introduction" label="导师简介" width="600" />
      <el-table-column prop="teacher_project" label="研究项目" width="600" />
      <el-table-column prop="teacher_honor" label="获得荣誉" width="400" />
      <el-table-column prop="action" label="操作" width="200" fixed="right" align="center">
        <template v-slot="scope">
          <!-- <el-button type="primary" :icon="Tools" @click="handleRoleDialogValue(scope.row.stu_id, scope.row.roleList)">分配角色
          </el-button> -->
          <!-- 重置密码 -->
          <!-- <el-popconfirm v-if="scope.row.username != 'python222'" title="您确定要对这
  个用户重置密码吗？" @confirm="handleResetPassword(scope.row.stu_id)">
            <template #reference>
              <el-button type="warning" :icon="RefreshRight">重置密码</el-button>
            </template>
    </el-popconfirm> -->
          <el-popconfirm :title="confirm_title" @confirm="selectTea(scope.row)">
            <template #reference>
              <el-button type="success" :icon="Position" @click="changeTitle(scope.row)" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:currentPage="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>
<script setup>
import { Search, Delete, DocumentAdd, Position, Remove } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 请求api
import { getTeaList, handleSelectTea, handleDelSelectTea, handleDelSelectStu, getSelectTea } from "@/api/stu_teacher"
// 公共方法
import { toast } from '@/util/util'


// 用户
let user = JSON.parse(sessionStorage.getItem("currentUser"))



// 用户角色
const sysRoleList = ref([])
const roleDialogVisible = ref(false)

// 切换title
const confirm_title = ref("确认选择导师吗？")
const changeTitle = (row) => {
  if (row.teacher_name) {
    confirm_title.value = "确认选择 " + row.teacher_name + "导师吗？"
  } else {
    confirm_title.value = "确认选择导师吗？"
  }
}


// 如果已经选择了导师-获取导师信息
const select_tea = ref("")
const initGetSelectTea = async () => {
  await getSelectTea({ stu_id: user.username }).then(res => {
    if (res.data.code == 200) {
      select_tea.value = res.data.select_tea
    } else {
      select_tea.value = ""
    }
  }).catch(e => {
    console.log("网络请求错误！", 'error')
  })

}
initGetSelectTea()

// 列表数据
const tableData = ref([])
const total = ref(0)
const queryForm = ref({
  query: '',
  status:"",
  pageNum: 1,
  pageSize: 20,
})

// 初始化导师列表
const initTeaList = async () => {
  queryForm.value.username = user.username
  await getTeaList(queryForm.value).then(res => {
    tableData.value = res.data.teaList;
    total.value = res.data.total;
  }).catch(e => {
    toast(e.message, 'error')
  })
}
initTeaList();
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initTeaList()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initTeaList()
}


// 选择导师：
const selectTea = async (row) => {
  if (!row.teacher_id) {
    toast("请选择导师！", "error")
    return false
  }
  if (!user.roles.includes("学生")) {
    toast("您不是学生角色，不能选择导师！", "error")
    return false
  }

  let data = {
    teacher_id: row.teacher_id,
    teacher_name: row.teacher_name,
    stu_id: user.username,
    directions: row.teacher_direction,
  }
  await handleSelectTea(data).then(res => {
    if (res.data.code == 200) {
      toast("选择成功！")
      initGetSelectTea()
      initTeaList()
    } else {
      toast(res.data.message, 'error')
      initGetSelectTea()
      initTeaList()
    }
  }).catch(e => {
    toast("网络请求错误！", 'error')
  })

}


// 退选导师
const delSelectTea = async (teacher_id) => {
  await handleDelSelectTea({
    stu_id: user.username,
    teacher_id: teacher_id,
  }).then(res => {
    if (res.data.code == 200) {
      toast("退选成功！")
      initGetSelectTea()
      initTeaList()
    } else {
      toast(res.data.message, 'error')
      initGetSelectTea()
      initTeaList()
    }
  }).catch(e => {
    toast("网络请求错误！", 'error')
  })

}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>